<template>
  <view class="freight">
    <u-popup :show="comFreight">
      <view class="title">
        运费分摊 <image src="/static/image/close.png" @click="closeFre" />
      </view>
      <view class="content">
        <view v-for="(item, index) in radioList" :key="index" class="radio" @click="changeRadio(item.code)">
          <view class="label">
            {{ item.name }}
            <view :class="newRadioVal == item.code ? 'radioDefault radioAcitve' : 'radioDefault'">
              <u-icon v-if="newRadioVal == item.code" name="checkmark" color="#FFFFFF" size="10" />
            </view>
          </view>
          <view class="tips">{{ item.tips }}</view>
        </view>
      </view>
      <view class="button" @click="freightFn">确定</view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    freightFlag: {
      type: Boolean,
      default: false
    },
    radioVal: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      comFreight: this.freightFlag,
      newRadioVal: this.radioVal,
      radioList: [
        { name: '运费单开', code: 10, tips: '订单中运费单独计算' },
        { name: '运费分摊', code: 20, tips: '将运费分摊到订单商品金额中' },
      ]
    }
  },
  watch: {
    freightFlag(newVal, oldVal) {
      if (newVal !== oldVal) this.comFreight = newVal
    },
    radioVal(newVal, oldVal) {
      if (newVal !== oldVal) this.newRadioVal = newVal
    }
  },
  methods: {
    changeRadio(code) {
      this.newRadioVal = code
    },
    closeFre() {
      this.$emit('update:freightFlag', false)
    },
    freightFn() {
      this.$emit('freightFn', this.newRadioVal)
    }
  },
}
</script>

<style scoped lang="scss">
.freight {
  .button {
    width: 624rpx;
    height: 64rpx;
    border-radius: 8rpx;
    background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
    margin: 0 auto;
    margin-top: 66rpx;
    margin-bottom: 60rpx;
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .title {
    width: 100%;
    height: 88rpx;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    color: #222222;
    font-size: 28rpx;
    font-weight: 700;
    border-bottom: 1rpx solid #F5F5F5;
    image {
      height: 48rpx;
      width: 48rpx;
    }
  }
  .content {
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    .radio {
      padding: 26rpx 0rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #F5F5F5;
      .label {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
      }
      .tips {
        color: #AAAAAA;
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 8rpx;
      }
    }
    .radioDefault {
      flex-shrink: 0;
      width: 32rpx;
      height: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      border-radius: 50%;
      border: 1rpx solid #D3D3D3;
      margin-right: 16rpx;
    }
    .radioAcitve {
      background: #FF5533;
      border: 1rpx solid #FF5533;
    }
  }
}
</style>
